<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .thumbnail {
            cursor: pointer;
            width: 100px;
            height: 100px;
            object-fit: cover;
            margin: 5px;
        }
        .modal-img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<div id="app" class="container mt-4">
    <div class="row">
        <div v-for="image in images" :key="image.id" class="col-md-3">
            <img :src="getImageUrl(image.id, 'minImg')" class="thumbnail" @click="showFullImage(image.id)" />
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <img :src="fullImageUrl" class="modal-img" />
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            images: [
                { id: '1836700083632050178' },
                { id: '1836701302966571009' },
                { id: '1836701475063033857' },
                { id: '1836701665371099137' }
            ],
            fullImageUrl: ''
        },
        methods: {
            getImageUrl(id, type) {
                return `/${type}/${id}`;
            },
            showFullImage(id) {
                // 请求原图地址
                $.ajax({
                    url: this.getImageUrl(id, 'img'),
                    method: 'GET',
                    success: (data) => {
                        this.fullImageUrl = data.url; // 假设返回的数据中包含 URL
                        $('#imageModal').modal('show');
                    },
                    error: (err) => {
                        console.error('Error fetching image:', err);
                    }
                });
            }
        }
    });
</script>
</body>
</html>
